<template>
	<view>
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm flex justify-between">
				<view class="font-sub-title">
					<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
					我的睡眠
				</view>
				<picker mode="date" :value="date" @change="bindDateChange">
					<text class="font-sub-title cuIcon-calendar"></text>
				</picker>
			</view>
			
		</view>
		<sleepchart :style="{marginTop:navHeight}" :title="date==now?'今日睡眠':date" :date="date"></sleepchart>
		<!-- <view class="cu-list menu sm-border"  :style="{marginTop:getHeight}">
			<view class="cu-item" v-for="data in varList" @click="changeSleep(data.date)">
				<view class="content padding-tb-sm">
					<view class="font-normal">深 {{getTime(data.deepSleepTotal)}},浅 {{getTime(data.lightSleepTotal)}}</view>
				</view>
				<view class="margin-right-xl font-small" :class="getText(getSleepStarnd(Number(data.deepSleepTotal)+Number(data.lightSleepTotal)))">{{getSleepStarnd(Number(data.deepSleepTotal)+Number(data.lightSleepTotal))}}</view>
				<view class="action">
					<text class="font-small time">{{data.date}}</text>
				</view>
			</view> -->
			<!-- 加载更多 -->
			<!-- <biaofun-loading-more :loading="loading" :loadall="loadAll"></biaofun-loading-more>
		</view> -->
	</view>
</template>

<script>
	import sleepchart from '@/pages/health/sleepchart/index.vue'
	import {formatDateDay,formatHour} from '@/utils/datetime.js'
	import {sleepStandard} from '@/utils/standard.js'
	import biaofunLoadingMore from '@/components/biaofun-loading-more/biaofun-loading-more.vue';
	import {
		mapGetters
	} from 'vuex'
	var that
	export default {
		components: {
			sleepchart,
			biaofunLoadingMore
		},
		computed:{
			...mapGetters(['navHeight']),
			getHeight(){
				return (Vue.prototype.StatusBar+uni.upx2px(90)+this.chartHeight)+'px'
			}
		},
		data() {
			return {
				statusBarHeight:Vue.prototype.StatusBar,
				date:'',
				varList:[],
				now:'',
				pageNum:1,
				pageSize: 10, // 每页数据条数
				loading: false, // 正在加载中？
				loadAll: false, // 加载了全部数据？
				chartHeight:''
			}
		},
		onReady() {
			that = this;
			uni.createSelectorQuery().in(this).select('.my_sleep_chart').boundingClientRect(result => {
			  if (result) { 
			    that.chartHeight = result.height
			  }
			 }).exec(); 
		},
		async onReachBottom() {
			// 判断是否加载完了全部数据
			if(!this.loadAll) {
				// 查询列表数据
				this.getData();
			}
		},
		onLoad(){
			that = this;
			this.date = formatDateDay(new Date())
			this.now = formatDateDay(new Date())
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			getTime(time){
				return formatHour(time);
			},
			getSleepStarnd(time){
				return sleepStandard(time);
			},
			getText(standard){
				if(standard=="睡眠良好"){
					return "text-green";
				}
				if(standard=="睡眠较差"){
					return "text-red";
				}
				if(standard=="暂无数据"){
					return "text-gray";
				}
			},
			bindDateChange(e){
				that.date =e.target.value 
			}
		}
	}
</script>

<style scoped>
.cu-item{
	height: 108rpx;
}
</style>
